<template>
    <ui-main title="树表">
            <el-alert
                title="此功能已被官方组件替代"
                type="warning"
                description="element官方已经实现了树表的功能,今后请已官方为准,此组件文档后续将删除"
                show-icon
                :closable="false">
            </el-alert>

            <el-button @click="link" type="warning" plain>🎈 官方文档</el-button>

            <div class="ui message">
                <div class="header">$tableExpand已废弃</div>
                <div style="white-space:pre-line">
                    请先删除原本的调用方式:
                    <span class="t-purple">
                        1. 删除js部分 this.$tableExpand.init
                        2. 删除指令部分 ui-table-expand
                        3. 改为官方调用方式,添加参数 row-key
                    </span>
                </div>
            </div>
            <div>
                <el-table ref="table"
                    :data="tabObj.tableData"
                    border
                    :row-style="$tableExpand.rowStyle"
                    style="width: 100%;"
                    row-key="id"
                    @select="rowSelect"
                    @expand-change="ec">
                    <el-table-column type="index"></el-table-column>
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column label="姓名">
                        <template slot-scope="scope">
                            <!-- 折叠缩进与按钮 -->
                            <!-- <ui-table-expand :scope="scope"/> -->
                            {{scope.row.name}}
                        </template>
                    </el-table-column>
                    <el-table-column label="年龄" prop="age"></el-table-column>
                    <el-table-column label="性别" prop="sex"></el-table-column>
                </el-table>
            </div>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                // 格式化后的数据源
                tabObj: {
                    tableData: []
                },
                selectedNodes: [] //用户点击checkbox所关联的所有节点
            }
        },
        mounted() {
            // 数据源
            const dataSource = [
                {
                    id: 1,
                    name: '测试1',
                    age: 18,
                    sex: '男',
                    children: [{
                        id: 2,
                        name: '测试2',
                        age: 22,
                        sex: '男'
                    }]
                },
                {
                    id: 3,
                    name: '测试3',
                    age: 23,
                    sex: '女',
                    children: [
                        {
                            id: 4,
                            name: '测试4',
                            age: 22,
                            sex: '男'
                        },
                        {
                            id: 5,
                            name: '测试5',
                            age: 25,
                            sex: '男'
                        },
                        {
                            id: 6,
                            name: '测试6',
                            age: 26,
                            sex: '女',
                            children: [
                                {
                                    id: 7,
                                    name: '测试7',
                                    age: 27,
                                    sex: '男',
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 8,
                    name: '测试8',
                    age: 18,
                    sex: '男'
                }
            ]
            // 用公共方法格式化数据源. 参数:(数据源, 是否全部展开)
            // this.tabObj.tableData = this.$tableExpand.init(dataSource, true)
            this.tabObj.tableData = dataSource
        },
        methods:{
            rowSelect(selection, row){//row:操作点(当前点击的checkbox), 操作row时所有相关children状态同步改变
                this.selectedNodes = []
                this._updateSelectedRows(row)
                this.selectedNodes.forEach((item)=>{
                    item._checked = !item._checked
                    if (item._checked !== row._checked) {
                        item._checked = row._checked // children与row状态相反时去操作row, children获取row状态
                    }
                    this.$refs.table.toggleRowSelection(item, item._checked)
                })
            },
            _updateSelectedRows(row){//获取所有对应的子节点,包括用户主动改变的节点
                this.selectedNodes.push(row)
                if (row.children) {
                    row.children.forEach((item)=>{
                        this._updateSelectedRows(item)
                    })
                }
            },
            link(){
                window.open('https://element.eleme.cn/#/zh-CN/component/table#shu-xing-shu-ju-yu-lan-jia-zai')
            },
            ec(row,expanded){
                console.log('操作行', row);
                console.log('折叠状态', expanded);
            }
        }
    }

</script>
